<template>
  <view class="wrap">
		<view class="leaflet">
			<input type="file" name="file" />
		</view>
    <view class="container">
      <uni-forms ref="form" :model="form" labelWidth="60px" label-position="top">
        <uni-forms-item label="歌曲名" name="name">
          <uni-easyinput v-model="form.name" placeholder="请输入歌曲名" />
        </uni-forms-item>
        <uni-forms-item label="歌手" name="artist">
          <view class="item-flex">
            <view class="item-input">
              <uni-easyinput v-model="form.artist" placeholder="请输入歌手" />
            </view>
            <view class="item-select">
              <button :plain="true" type="primary" size="mini">选择</button>
            </view>
          </view>
        </uni-forms-item>
        <uni-forms-item label="歌曲地址" name="url">
          <view class="item-flex">
            <view class="item-input">
              <uni-easyinput v-model="form.url" :disabled="true" placeholder="请选择歌曲地址" />
            </view>
            <view class="item-select">
              <button @click="handleChooseFile" :plain="true" type="primary" size="mini">选择</button>
            </view>
          </view>
        </uni-forms-item>
        <uni-forms-item label="封面" name="cover">
          <view class="item-flex">
            <view class="item-input">
              <uni-easyinput v-model="form.cover" :disabled="true" placeholder="请选择封面" />
            </view>
            <view class="item-select">
              <button :plain="true" type="primary" size="mini">选择</button>
            </view>
          </view>
        </uni-forms-item>
        <uni-forms-item label="歌词" name="lrc">
          <view class="item-flex">
            <view class="item-input">
              <uni-easyinput v-model="form.lrc" :disabled="true" placeholder="请选择歌词" />
            </view>
            <view class="item-select">
              <button :plain="true" type="primary" size="mini">选择</button>
            </view>
          </view>
        </uni-forms-item>
        <uni-forms-item label="描述" name="description">
          <uni-easyinput v-model="form.description" placeholder="请输入描述" />
        </uni-forms-item>
        <uni-forms-item v-if="form.updateTime" label="修改时间" name="updateTime">
          <uni-easyinput :value="form.updateTime" :disabled="true" :clearable="false" />
        </uni-forms-item>
        <uni-forms-item v-if="form.createTime" label="创建时间" name="createTime">
          <uni-easyinput :value="form.createTime" :disabled="true" :clearable="false" />
        </uni-forms-item>
      </uni-forms>
      <div class="footer-fixed">
        <u-button @click="handleSubmit" class="btn-submit" type="primary">保存</u-button>
      </div>
    </view>
  </view>
</template>

<script module="leaflet" lang="renderjs">
	export default {
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<script>
import { strer, dater } from '@daelui/dogjs/dist/components.js'
import muSer from '@/api/service/music.js'
export default {
  data() {
    return {
      params: {},
      form: {
        name: '',
        artist: '',
        url: '',
        cover: '',
        lrc: '',
        description: '',
        createTime: '',
        updateTime: ''
      },
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            },
          ]
        },
        artist: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad(params) {
    this.params = params
  },
  onShow(params) {
    this.initView()
  },
  methods: {
    async initView () {
      let params = this.params || {}
      let node = await muSer.queryItem({ id: params.id || -9999 })
      if (node) {
        this.isEdit = true
        this.form = node
      }
    },
		handleChooseFile () {
			uni.navigateTo({
				url: '/pages/music/file?type=music'
			})
		},
    handleSubmit () {
      this.$refs.form.validate().then(res => {
        this.save()
      })
    },
    save () {
      let defer = Promise.resolve()
      let user = this.getCurrentUser()
      if (!this.isEdit) {
        let time = dater.format(new Date())
        this.form.id = strer.udigit()
        this.form.createTime = time
        this.form.userId = user.userId
        defer = muSer.insert(this.form)
      } else {
        this.form.updateTime = dater.format(new Date())
        defer = muSer.update(this.form)
      }
      defer.then(() => {
        this.$u.toast('操作成功')
        uni.navigateBack({
          url: '/pages/music/manager'
        })
      }).catch(() => {
        this.$u.toast('操作失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}
.container {
  padding: 15px 15px 80px;
  background-color: #ffffff;
}
.footer-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  background: #fff;
  border-top: 1px #ebeef5 solid;
  z-index: 9;
  .btn-submit {
    width: 100%;
  }
}
.item-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item-input {
    flex: 1;
  }
  .item-select {
    padding-left: 8px;
    width: 80px;
    height: 37px;
    /deep/ uni-button {
      width: 100%;
      height: 36px;
      line-height: 34px;
      font-size: 14px;
    }
  }
}
</style>
